<template>
  <el-card shadow="never">
    <div slot="header"
         class="clearfix">
      <div class=" flex-between ">
        <div class="flex">
          <div class="line"></div>
          <div class="fontSize16"
               style="font-weight: 700;">套餐卡统计 </div>
        </div>

      </div>

    </div>

    <div class="fourPalaceGrid">
      <div class="singlePalaceGrid flex-column">
        <div style="color: rgb(94, 120, 248);font-weight: 700;font-size: 24px;">
          {{ packageStatistics.order_count?packageStatistics.order_count:0 }}
        </div>
        <div class="m-top10">

          订单数量
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <div style="font-weight: 700;font-size:  24px;">
          {{ packageStatistics.order_amount?packageStatistics.order_amount:0 }}
        </div>
        <div class="m-top10">

          订单金额
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <div style="font-weight: 700;font-size:  24px;">
          {{packageStatistics.surplus_num?packageStatistics.surplus_num:0}}
        </div>
        <div class="m-top10">

          剩余核销次数
        </div>
      </div>
      <div class="singlePalaceGrid flex-column">
        <div style="color: red;font-weight: 700;font-size: 24px;">
          {{  packageStatistics.num?packageStatistics.num:0}}
        </div>
        <div class="m-top10">

          已核销次数
        </div>
      </div>
    </div>

  </el-card>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
// import VChart from 'vue-echarts';
import 'echarts-wordcloud';

import { echartsMixin } from '@/utils/echarts-mixin';
import { packageStatistics } from '@/api/homeConsole/index'
use([CanvasRenderer, TooltipComponent]);

export default {
  //   components: { VChart },
  mixins: [echartsMixin(['hotSearchChart'])],
  data () {
    return {
      // 词云图表配置
      hotSearchChartOption: {},
      packageStatistics: null
    };
  },
  created () {
    this.getWordCloudData();
  },
  methods: {
    async getWordCloudData () {
      const res = await packageStatistics()
      console.log(res)
      if (res.code == 0) {
        this.packageStatistics = res.data
      }
    }


  }
};
</script>
<style lang="less" scoped>
.line {
  width: 4px;
  height: 25px;
  margin-right: 5px;
  background: rgb(90, 158, 247);
}
.fourPalaceGrid {
  display: flex;
  flex-wrap: wrap;
  .singlePalaceGrid {
    flex: 50%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

    height: 78px;

    align-items: center;
    box-sizing: border-box;

    // border: 1px solid #f5f6fb;
    .accumulateNum {
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .Num {
        color: #1e6ceb;
        font-size: 20px;
      }
    }
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}
</style>
